<template>
  <div class="member_list">
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row style="width: 96.3%">
        <el-col :span="24">
          <el-input
            v-model="searchModel.search_key.name"
            placeholder="区域名称"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.name = ''"
          />
          <el-input
            v-model="searchModel.search_key.address"
            placeholder="地址"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.address = ''"
          />
          <el-input
            v-model="searchModel.search_key.district"
            placeholder="所属地区"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.district = ''"
          />
          <el-input
            v-model="searchModel.search_key.latitude"
            placeholder="纬度"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.latitude = ''"
          />
          <el-input
            v-model="searchModel.search_key.longitude"
            placeholder="经度"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.longitude = ''"
          />
          <el-input
            v-model="searchModel.search_key.memo"
            placeholder="备注"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.memo = ''"
          />
          <el-input
            v-model="searchModel.search_key.sort"
            placeholder="排序"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.sort = ''"
          />
          <!--
          <el-input
            v-model="searchModel.search_key.openid"
            placeholder="微信openid"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.openid = ''"
          />
           -->
          <el-select
            v-model="searchModel.search_key.status"
            placeholder="状态"
            clearable
            @change="getAreaList"
            @clear="searchModel.search_key.status = null"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="searchModel.search_key.created_at"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="创建开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getAreaList"
          />
          <el-date-picker
            v-model="searchModel.search_key.updated_at"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="更新开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getAreaList"
          />

          <el-button type="primary" icon="el-icon-search" @click="getAreaList"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="clearSearchParams"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-search"
            @click="exportExcel"
            >导出</el-button
          >
        </el-col>
        <!-- <el-col :span="1" align="right"> -->
      </el-row>
      <el-button
        style="position: absolute; right: 30px; top: 20px"
        type="primary"
        icon="el-icon-plus"
        circle
        @click="openEditUI(null)"
      />
      <!-- </el-col> -->
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <!-- (page-1) * pageSize + index + 1 -->
            {{
              (searchModel.page - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="id" label="id" width="96" /> -->
        <!-- <el-table-column prop="name" label="名称" /> -->
        <el-table-column
          prop="name"
          label="区域名称"
          width="104"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.name"
              placement="top-start"
            >
              <div>{{ scope.row.name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="246" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.address"
              placement="top-start"
            >
              <div>{{ scope.row.address }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="district"
          label="所属地区"
          width="106"
          align="center"
        />
        <el-table-column
          prop="latitude"
          label="纬度"
          width="106"
          align="center"
        />
        <!-- <el-table-column prop="address" label="镇区后地址" width="106" /> -->
        <el-table-column
          prop="longitude"
          label="经度"
          width="96"
          align="center"
        />
        <el-table-column prop="sort" label="排序" width="56" align="center" />
        <!-- width="66" -->
        <el-table-column prop="memo" label="备注" align="center">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.memo"
              placement="top-start"
            >
              <div>{{ scope.row.memo }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="66">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="166"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.created_at"
              placement="top-start"
            >
              <div>{{ scope.row.created_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="updated_at"
          label="更新时间"
          width="166"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.updated_at"
              placement="top-start"
            >
              <div>{{ scope.row.updated_at }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column label="区域树种" width="120" fixed="right">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.planting_tree_specification_count + '个树种'" placement="top-start">
              <span style="color: #1890ff;cursor: pointer;" @click="$router.push(`/tree/specList?id=${scope.row.id}`)">
                查看区域树种({{ scope.row.planting_tree_specification_count }})
              </span>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          width="220"
          header-align="center"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.planting_area_tree_count + '个树种'"
              placement="top-start"
              style="margin-right: 15px"
            >
              <span
                style="color: #1890ff; cursor: pointer"
                @click="openEditUI2(scope.row.id)"
              >
                修改可用树种({{ scope.row.planting_area_tree_count }})
              </span>
            </el-tooltip>
            <!-- <el-tooltip effect="dark" :content="scope.row.planting_area_tree_count + '个树种'" placement="top-start" style="margin-right: 15px">
              <span style="color: #1890ff;cursor: pointer;" @click="$router.push(`/tree/specList?id=${scope.row.id}`)">
                查看区域树种({{ scope.row.planting_area_tree_count }})
              </span>
            </el-tooltip> -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="openEditUI(scope.row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="deleteUser(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.page"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 用户信息编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
      class="area"
    >
      <el-form ref="userFormRef" :model="userForm" :rules="rules">
        <!-- {{ address }} -->
        <el-form-item
          label="所属镇"
          prop="district"
          :label-width="formLabelWidth"
        >
          <!-- <el-cascader
            filterable
            clearable
            v-model="address"
            :options="options"
            :props="{
              expandTrigger: 'hover',
              value: 'code',
              label: 'name',
              ...props,
            }"
            :size="size"
            :disabled="disabled"
            :placeholder="placeholder"
            @focus="focus"
            @visible-change="visibleChange"
            @input="change"
            @change="change"
          ></el-cascader> -->
          <el-cascader
            v-model="address"
            :options="addressArr"
            :props="{ expandTrigger: 'hover' }"
            clearable
            @change="handleChange"
            @focus="handChange"
          >
            <!-- :show-all-levels="false" -->
          </el-cascader>
        </el-form-item>
        <el-form-item
          label="区域名称"
          prop="name"
          :label-width="formLabelWidth"
        >
          <!-- @change="changeVal(userForm.name)" -->
          <el-input v-model="userForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" :label-width="formLabelWidth">
          <el-input v-model="userForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="具体镇区后地址"
          prop="address"
          :label-width="formLabelWidth"
        >
          <el-input v-model="userForm.address" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item
          label="纬度"
          prop="latitude"
          :label-width="formLabelWidth"
        >
          <el-input v-model="userForm.latitude" placeholder="-90到90" />
          <el-button style="margin-left: 6px" size="small" type="primary" plain>
            <a href="https://lbs.qq.com/getPoint/" target="_blank"
              >前往获取经纬度</a
            ></el-button
          >
        </el-form-item>
        <el-form-item label="经度" :label-width="formLabelWidth">
          <el-input
            v-model="userForm.longitude"
            placeholder="-180到180"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="userForm.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus"
          />
        </el-form-item>
        <el-form-item label="备注" prop="memo" :label-width="formLabelWidth">
          <el-input v-model="userForm.memo" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
          <el-input v-model="userForm.sort" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveArea">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 树种 -->
    <el-dialog
      :title="title2"
      :visible.sync="dialogFormVisible2"
      @close="clearForm2"
      class="area"
    >
      <el-form ref="userFormRef" :model="myUserForm">
        <el-form-item
          label="可用树种"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 10px 0"></div>
          <el-checkbox-group
            v-model="myUserForm.planting_tree_ids"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in treeList"
              v-show="item.status == 1"
              :key="item.id"
              :label="item.id"
              :disabled="item.status == 0"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveArea2">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 车牌号 -->
    <!-- <el-dialog
      title="历史车牌号"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div v-for="(item, index) in carList" :key="item.plate_number">
        <div class="carItem">
          <div>
            <span>车牌号{{ index + 1 }}: </span>
            {{ item.plate_number }}
          </div>
          <div>
            <span>添加时间: </span>
            {{ item.created_at }}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import areaApi from "@/api/area";
import treeApi from "@/api/treeList";
import exportUtil from "@/excel/ExportExcel";
import addressArr from "@/assets/json/index.json";
export default {
  data() {
    const checkaccount = (rule, value, callback) => {
      var reg =
        /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
      if (!reg.test(value)) {
        return callback(new Error("邮箱格式错误"));
      }
      callback();
    };
    return {
      treeList: [],
      treeFilerDisableId: [],
      address: "",
      addressArr: addressArr,
      dialogVisible: false,
      carList: [],
      status: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 0,
          label: "禁用",
        },
        // {
        //   value: -1,
        //   label: 'null'
        // }
      ],
      formLabelWidth: "130px",
      userForm: {},
      myUserForm: {
        planting_tree_ids: [5],
      },
      checkAll: false,
      isIndeterminate: true,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      title: "",
      title2: "",
      total: 0,
      searchModel: {
        page: 1,
        pageSize: 10,
        search_key: {},
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              start.setHours(0, 0, 0, 0); // 设置时间为0点0分0秒0毫秒
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      userList: [],
      rules: {
        // address
        district: [
          { required: true, message: "请选择所属镇/县/区", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入种植区域名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录初始密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        account: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { validator: checkaccount, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getAreaList();
    this.getTreeList();
  },
  methods: {
    handleCheckAllChange(val) {
      // this.checkedCities = val ? this.treeList : []; // myUserForm.planting_tree_ids
      this.myUserForm.planting_tree_ids = val
        ? this.treeList2.map((item) => {
            return item.id;
          })
        : []; // myUserForm.planting_tree_ids
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const treeList = this.treeList
        .filter((item) => item.status === 1)
        .map((item) => item.id);
      // this.checkAll = checkedCount === treeList.length;
      const allTrees2 = value.filter(
        (element) => !this.treeFilerDisableId.includes(element)
      );
      const checkedCount = allTrees2.length;
      this.checkAll =
        checkedCount === treeList.length &&
        treeList.every((tree) => allTrees2.includes(tree));
      console.log(value, "value");
      console.log(treeList, "treeList");
      console.log(allTrees2, "allTrees2");

      // console.log(treeList, "treeList");
      this.isIndeterminate = checkedCount > 0 && checkedCount < treeList.length;
    },
    getTreeList() {
      treeApi.getTreeList({ page: 1, pageSize: 100 }).then((res) => {
        this.treeList = res.data.data;
        this.treeList2 = this.treeList.filter(item => item.status === 1)
      });
    },
    // changeVal(name) {
    //   const pattern = /(?:镇|区|街道)(.+?)(?:村村民委员会|村委会)/;
    //   const pattern1 = /(?:镇|区|街道)(.+?)社区居民委员会/;
    //   // const pattern2 = /镇(.+?)股份经济联合社/;
    //   const pattern2 = /(?:镇|区|街道)(.+?)股份经济联合社/;
    //   const match = name.match(pattern);
    //   const match1 = name.match(pattern1);
    //   const match2 = name.match(pattern2);
    //   // console.log(match1[1]); // 输出：麻四村
    //   if (match) {
    //     console.log(match[1]); // 输出：麻四村
    //     this.userForm.name = match[1] + '村'
    //   } else if (match1) {
    //     this.userForm.name = match1[1] + '村'
    //   } else if (match2) {
    //     this.userForm.name = match2[1] + '村'
    //   }
    // },
    handleChange(value) {
      console.log(value);
      this.userForm.province = value[0];
      this.userForm.city = value[1];
      this.userForm.district = value[2];
    },
    handChange(value) {
      console.log(value, "handChange");
      console.log(this.userForm.district, "district");
      if (!this.userForm.district) {
        const arr = [
          "东城街道",
          "南城街道",
          "万江街道",
          "莞城街道",
          "石碣镇",
          "石龙镇",
          "茶山镇",
          "石排镇",
          "企石镇",
          "横沥镇",
          "桥头镇",
          "谢岗镇",
          "东坑镇",
          "常平镇",
          "寮步镇",
          "樟木头镇",
          "大朗镇",
          "黄江镇",
          "清溪镇",
          "塘厦镇",
          "凤岗镇",
          "大岭山镇",
          "长安镇",
          "虎门镇",
          "厚街镇",
          "沙田镇",
          "道滘镇",
          "洪梅镇",
          "麻涌镇",
          "望牛墩镇",
          "中堂镇",
          "高埗镇",
          "松山湖管委会",
          "虎门港管委会",
          "东莞生态园",
        ];
        const regex = this.userForm.name.match(/(?:市|区)(.+镇)/);
        const name = regex ? regex[1].trim() : "";
        console.log(regex, "regex");
        if (arr.includes(name)) {
          this.userForm.district = name;
        } else {
          this.userForm.district = "东城街道";
        }
        this.address = [
          this.userForm.province,
          this.userForm.city,
          this.userForm.district,
        ];
      }
    },
    open(id) {
      // 请求
      areaApi.getCarList(id).then((res) => {
        console.log(res.data);
        this.carList = res.data;
        this.dialogVisible = true;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 导出
    exportExcel() {
      require.ensure([], () => {
        const fieldName = [
          "序号",
          "区域名称",
          "地址",
          "所属地区",
          "纬度",
          "经度",
          "备注",
          "状态",
          "创建时间",
          "更新时间",
        ];
        const filterVal = [
          "index",
          "name",
          "address",
          "district",
          "latitude",
          "longitude",
          "memo",
          "status",
          "created_at",
          "updated_at",
        ];
        const data = this.userList.map((v, i) =>
          filterVal.map((j) => {
            if (j === "index") {
              return i;
            } else if (j === "status") {
              return v[j] === 0 ? "禁用" : "正常";
            } else {
              return v[j];
            }
          })
        );
        const item = this.userList[0];
        console.log(fieldName, data, `${item.name}`);
        exportUtil.export_json_to_excel(
          fieldName,
          data,
          `${item.name} - ${new Date().toLocaleString().replaceAll("/", "-")}`
        );
        // exportUtil.export_json_to_excel(fieldName, data, `${item.name} - ${new Date().toLocaleDateString().replaceAll('/', '-')}`);
      });
    },
    // 修改启用状态
    changeStatus(e) {
      console.log(e, "status");
      // 确认吗
    },
    deleteUser(area) {
      this.$confirm(`您确认删除区域 ${area.name} ?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(11);
          areaApi.deleteAreaById(area.id).then((response) => {
            this.$message({
              type: "success",
              message: `删除区域 ${area.name} 成功`,
            });
            this.getAreaList();
          });
        })
        .catch(() => {
          console.log(22);
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    saveArea() {
      // 触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          // 修改状态
          // const item = { ...this.userList.filter((item) => item.id === this.userForm.id)[0] }
          // if (item.status !== this.userForm.status) {
          //   areaApi.updateMemberStatus(this.userForm)
          // }
          // 保存
          this.userForm.province = this.address[0];
          this.userForm.city = this.address[1];
          this.userForm.district = this.address[2];
          areaApi.saveArea(this.userForm).then((response) => {
            // 成功提示
            this.$message({
              message: this.userForm.id ? "修改成功" : "修改成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表格
            this.getAreaList();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveArea2() {
      // 触发表单验证
      // 提交请求给后台
      // 保存
      console.log(
        this.myUserForm.planting_tree_ids,
        "this.myUserForm.planting_tree_ids"
      );
      areaApi
        .updateUseTree(this.userForm.id, this.myUserForm.planting_tree_ids)
        .then((response) => {
          // 成功提示
          this.$message({
            message:
              this.myUserForm.planting_tree_ids.length > 0
                ? "修改成功"
                : "修改成功",
            type: "success",
          });
          // 关闭对话框
          this.dialogFormVisible2 = false;
          // 刷新表格
          this.getAreaList();
        });
    },
    clearForm() {
      this.userForm = {};
      this.address = "";
      this.$refs.userFormRef.clearValidate();
    },
    clearForm2() {
      this.userForm = {};
      this.address = "";
      this.$refs.userFormRef.clearValidate();
    },
    openEditUI(id) {
      if (id == null) {
        this.title = "新增种植区域";
        this.userForm = {
          // status: 1,
        };
      } else {
        this.title = "修改种植区域";
        // 根据id查询用户数据
        // areaApi.getUserById(id).then((response) => {
        //   this.userForm = response.data;
        // });
        // 根据分页筛选
        const item = { ...this.userList.filter((item) => item.id === id)[0] };
        this.userForm = item;
        this.address = [
          this.userForm.province,
          this.userForm.city,
          this.userForm.district,
        ];
      }
      this.dialogFormVisible = true;
    },
    openEditUI2(id) {
      if (id == null) {
        this.title2 = "新增可用树种";
        // this.userForm = {
        //   // status: 1,
        // };
      } else {
        this.title2 = "修改可用树种";
        // 根据id查询用户数据
        // areaApi.getUserById(id).then((response) => {
        //   this.userForm = response.data;
        // });
        // 根据分页筛选
        const item = { ...this.userList.filter((item) => item.id === id)[0] };
        this.userForm = item;
        this.myUserForm.planting_tree_ids = item.planting_area_tree_id_array;
        const allTrees = this.treeList
          .filter((item) => item.status === 1)
          .map((item) => item.id);
        const disabledId = this.treeList
          .filter((item) => item.status === 0)
          .map((item) => item.id);
        this.treeFilerDisableId = disabledId;
        const allTrees2 = item.planting_area_tree_id_array.filter(
          (element) => !disabledId.includes(element)
        );
        // const selectedTrees = this.myUserForm.planting_tree_ids;
        // console.log(selectedTrees, "selectedTrees");
        this.checkAll =
          allTrees.length === allTrees2.length &&
          allTrees2.every((tree) => allTrees.includes(tree));
        console.log(allTrees, "allTrees");
        console.log(allTrees2, "allTrees2");
        const checkedCount = this.myUserForm.planting_tree_ids.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < allTrees.length;
      }
      this.dialogFormVisible2 = true;
    },
    // openEditUI3(id) {
    //   if (id == null) {
    //     this.title2 = "新增可用树种";
    //     this.myUserForm = {
    //       // status: 1,
    //     };
    //   } else {
    //     this.title2 = "修改可用树种";
    //     // myUserForm.planting_tree_ids
    //     const checkedCount = this.myUserForm.planting_tree_ids.length;
    //     console.log(checkedCount, "checkedCount");
    //     const treeList = this.treeList.filter(item => item.status === 1)
    //     console.log(treeList, "treeList");
    //     this.checkAll = checkedCount === treeList.length;
    //     this.isIndeterminate = checkedCount > 0 && checkedCount < treeList.length;
    //     console.log(this.checkAll, "this.checkAll");
    //     console.log(this.isIndeterminate, "this.isIndeterminate");

    //     // 根据id查询用户数据
    //     treeApi.getTreeList2({ page: 1, pageSize: 100, search_key: { planting_area_id: id }}).then((response) => {
    //       this.myUserForm.planting_tree_ids = response.data.data.map(item => {
    //         // return item.id
    //         return item.id
    //       });
    //     });
    //     // 根据分页筛选
    //     // const item = { ...this.userList.filter((item) => item.id === id)[0] };
    //     // this.myUserForm = item;
    //     // this.address = [
    //     //   this.userForm.province,
    //     //   this.userForm.city,
    //     //   this.userForm.district,
    //     // ];
    //   }
    //   this.dialogFormVisible2 = true;
    // },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getAreaList();
    },
    handleCurrentChange(page) {
      this.searchModel.page = page;
      this.getAreaList();
    },
    getAreaList() {
      //
      const page = this.searchModel.page;
      areaApi.getAreaList(this.searchModel).then((response) => {
        //
        this.userList = response.data.data;
        this.total = response.data.total;
        if (page > response.data.current_page) {
          this.searchModel.page = 1;
          this.getAreaList();
        }
      });
    },
    // 重置
    clearSearchParams() {
      this.searchModel = {
        page: 1,
        pageSize: 10,
        search_key: {},
      };
      this.getAreaList();
    },
  },
};
</script>

<style lang="scss" scoped>
.area {
  .el-cascader {
    width: 400px !important;
  }

  .el-input {
    //  width: 100% !important;
  }
}

.carItem {
  margin-bottom: 12px;

  div {
    margin-bottom: 4px;

    span {
      width: 76px;
      display: inline-block;
    }
  }
}

.member_list {
  .el-table__row .el-table__cell,
  .el-tooltip,
  .el-button .cell {
    white-space: nowrap;
    /* width: 50px; */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 显示省略号 */
  }
}

.el-select {
  margin-right: 10px;
}

#search {
  display: flex;
  flex-wrap: wrap;

  .el-input {
    width: 190px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .el-date-editor {
    margin-right: 12px;
    margin-bottom: 10px;
  }
}

.el-dialog .el-input {
  width: 75%;
}
</style>
